<template>
  <div>
    <div class="flex justify-content-between mb10">
      <div class="flex">
        <div>
          <span class="mr5"><a-button type="primary"  :loading="addLoading" @click="handleAddOpen"> <template
              #icon><PlusOutlined/> </template>新增追踪记录</a-button></span>
        </div>
      </div>
    </div>
    <a-table
        :columns="columns"
        rowClassName="items"
        :loading="tableLoading"
        rowKey="id"
        :pagination="false"
        :data-source="tableData"
        style="height:calc(100vh - 305px)"
        size="small" sticky bordered>
      <template #bodyCell="{ column,text,record,index }">
        <template v-if="column.dataIndex==='zhuangTai'">
          <div class="flex justify-center">
            <span v-if="record.zhuangTai==1">待派</span>
            <span v-if="record.zhuangTai==2">在船</span>
            <span v-if="record.zhuangTai==3">在家</span>
          </div>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
              <span class="mr5">

              </span>
          </div>
        </template>
      </template>
    </a-table>
    <div class="flex justify-center mt20">
      <a-pagination
          v-model:current="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          @change="handleChangePageNo"
          :page-size-options="pageSizeOptions"
          :show-total="total => `共 ${total} 项`"
          show-size-changer
          :total="total"/>
    </div>
    <add-user-base-dongtai ref="addRef" @success="handleSearch"></add-user-base-dongtai>
  </div>
</template>
<script setup>
import AddUserBaseDongtai from "./AddUserBaseDongtai.vue";
const addRef = ref(null)
const addLoading = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const cyid = ref(0)
const cyname = ref('')
const tableData = ref([]);
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const emits = defineEmits(["success"])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 15,
  chuanyuanId:'',
  keyword:''
})

const columns = [
  {title: '#', width: 80, dataIndex: 'index',align:"center",customRender:({text,record,index})=>index+1},
  {title: '跟踪记录日期', width: 180,  dataIndex: 'genZongRiQi',align:"center", ellipsis: true},
  {title: '状态', width: 160, dataIndex: 'zhuangTai',align:"center", ellipsis: true},
  {title: '内容',dataIndex: 'neiRong',align:"center", ellipsis: true},
  {title: '下次处理日期', width: 180,dataIndex: 'chuLiRiQi',align:"center", ellipsis: true},
  {title: '记录者', dataIndex: 'jiLuZheNiCheng',align:"center"},
];


/**
 * 查询列表数据
 */
const handleLoadData = async (chuanyuanId,cname)=>{
  cyid.value = chuanyuanId
  cyname.value = cname
  tableLoading.value = true
  queryParams.chuanyuanId = chuanyuanId
  const resp = await useLoadChuanYuanKuDongTaiNewApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData(cyid.value,cyname.value)
}


// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1;
  handleLoadData(cyid.value,cyname.value)
}


const handleAddOpen = ()=>{
  addLoading.value = true
  addRef.value.handleOpen(cyid.value,cyname.value)
  addLoading.value = false
}

defineExpose({
  handleLoadData
})

</script>
